<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<style type="text/css">

	*{margin:0;padding:0}	
	body,tbody,button{ font-size:20px}
	span{font-size:1.4em;}
	
	body{background:#FF9}
	
	/*全局class常量*/	
	.corner{-moz-border-radius: 0.5em;-webkit-border-radius: 0.5em;border-radius:0.5em}
	.green{color:green;}
	.red{color: red;}
	.bold{font-weight:bold;}
	
	/*全局list样式*/
	.lists{list-style:none;margin:0 1em}
	.lists .list{width:30em;background:#F7F7F7;-moz-border-radius:0.5em;margin-bottom:0.5em}
	.list .td1{width:5em;}
	.list .td1 img{width:4em;height:4em;}
	.list .td2{width:18em}
	.list .td3{width:7em}
	
	/*.button{
		background:#d5e4e1;
		padding:0.4em 0.9em;
		border:solid #C9F1E2 0.1em;
		vertical-align:middle;
		text-align:center;
		cursor:pointer;
		
		-moz-inline-stack;display:inline-block; *display:inline; *zoom:1;
	}
	div.button:hover{
		background:#C9F1E2;
		border:solid #d5e4e1 0.1em;
	}
	.button.disabled,.button.disabled:hover{
		background:#E7E8E9;
		border:solid #E7E8E9 0.1em;
		color:#999;
	}*/
	.btn-override{cursor:pointer;position:relative;padding:0.5em;vertical-align:middle;text-align:center;-moz-inline-stack;display:inline-block; *display:inline; *zoom:1;}
	.btn-override .btn-bg{position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;}
	.btn-override img{width:100%;height:100%}
</style>
<script type="text/javascript">	
$.fn.button=function(params){
	var options={
		bg:"images/btn-bg.png",
		hoverBg:"images/btn-bg-hover.png"
	};
    if(options!=null){
        $.extend(options,params);
    }
	return this.each(function(){
		var _this=this;
		var button=document.createElement("div");
		button.className="btn-override";
		button.innerHTML='<div class="btn-bg"><img src="'+ options.bg + '"/></div><span>' + $(this).val() + '</span>';	
		$(this).hide();
		$(button).insertAfter(this);
		
		$(button).hover(function(){
			$(".btn-bg img",this).attr("src",options.hoverBg);
		},function(){
			$(".btn-bg img",this).attr("src",options.bg);
		})
		$(button).click(function(){
			$(_this).trigger("click");
		})
	})
}
$(function(){
	$("input:button").button();	   
})

</script>
</head>
<body>
    <input type="button" value="确 定"/>
    <input type="button" value="取 消"/>
</body>
</html>
